<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>SCOPT</title>
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen"/>
        <link rel="stylesheet" href="dojox/grid/resources/Grid.css" media="screen"/>
        <link rel="stylesheet" href="dojox/grid/resources/claroGrid.css" media="screen"/>
        <link rel="stylesheet" href="styles.css" media="screen"/>
    </head>
    <body class="claro">
        <div id="loadingOverlay" class="loadingOverlay"></div>
        <div data-dojo-type="dijit/layout/LayoutContainer"
             class="fillWidth fillHeight">
            <div data-dojo-type="scopt/widget/app/HeaderWidget"
                 data-dojo-props="region: 'top'"></div>
            <div data-dojo-type="scopt/widget/app/FooterWidget"
                 data-dojo-props="region: 'bottom'"></div>
            <div data-dojo-type="dijit/layout/ContentPane"
                 data-dojo-props="region: 'left'">
                <div data-dojo-type="scopt/layout/HierarchyMenuNavigation"
                     data-dojo-id="menuNavigation"                     
                     data-dojo-props="hierarchyContainerId: 'hierarchyContainer'"
                     class="menuNavigation"></div>
            </div>
            <div data-dojo-type="scopt/layout/HierarchyContainer"
                 data-dojo-id="hierarchyContainer"                   
                 data-dojo-props="region: 'center', views: contentViews, connections: contentConnections"
                 id="hierarchyContainer" class="hierarchyContainer"></div>
        </div>
        <script src="config.js" type="text/javascript"></script>
        <script src="dojo/dojo.js" type="text/javascript"></script>
        <script type="text/javascript">
            require(["scopt/storage", "dojo/parser", "dojo/ready", "dojo/_base/kernel", "dojo/dom", "dojo/dom-style", "dojo/_base/fx"],
                    function(storage, parser, ready, kernel, dom, domStyle, fx) {
                        var locale = storage.localGet("app.locale");
                        if (!locale) {
                            storage.localPut("app.locale", kernel.locale);
                        } else {
                            kernel.locale = locale;
                        }

                        ready(function() {
                            parser.parse().then(function() {
                                var overlayNode = dom.byId("loadingOverlay");
                                fx.fadeOut({
                                    node: overlayNode,
                                    onEnd: function(node) {
                                        domStyle.set(node, "display", "none");
                                    }
                                }).play();
                            });
                        });
                    });
        </script>
    </body>
</html>
